import Divider from "@/src/components/divider"
import BorderlessButton from "@/src/components/borderless-button"
import Tag from "@/src/components/tag"
import { Axis } from "@/src/consts"
import Global from "@/src/lib/global"
import { Image, Text, View } from "@tarojs/components"
import "./recommand-goods-item.scss"
import { HomeGoodsModel } from "@/src/lib/models/home_index_model"
import { connect } from "react-redux"
import { State } from "@/src/dva/state"
import { UserState } from "@/src/dva/models/user"


interface RecommandGoodsItemProps {
    model: HomeGoodsModel
    user: UserState
}

const RecommandGoodsItem = (props: RecommandGoodsItemProps) => {
    const { model } = props
    let onBuyBtnClick = () => {
        Global.navigateTo("/pages/goodsdetail/index", {
            // package: "subpackages",
            params: {
                id: model.id
            }
        })
    }
    
    let discountTag
    if (model.discount && model.discount.length > 0) {
        discountTag = <Tag color="#444444">{ model.discount }</Tag>
    }

    return (
        <View className="recommand-goods-item" onClick={onBuyBtnClick}>
            <View className="img">
                <Image mode="aspectFill" src={ model.pic }/>
            </View>
            <View className="foot">
                <Image className="bg" src="http://r.punkyangsheng.com/xcx/img/images/bg_recommand_goods_foot@3x.png"></Image>
                <View className="content">
                    <View className="name">
                       <View className="rec">{ model.title }<View className="text">/{ model.hanliang }</View></View>
                    </View>
                    <Divider axis={Axis.horizontal}/>
                    <View className="price-container">
                        <View className="price">¥{ model.realprice }{ discountTag }</View>
                        <BorderlessButton className="pure-button" backgroundImage="btn_buy@3x.png"/>
                    </View>
                </View>
            </View>
            
        </View>
    )
}

export default connect((state: State) => ({ user: state.user }))(RecommandGoodsItem)